<template>
  <div>
    <a-button type="primary" style='margin-bottom: 5px' @click='$refs.fieldForm.open()'>添加管控字段</a-button>
    <a-form-model :model='form' ref='formModal'>
      <a-form-model-item prop='fields'>
        <a-transfer
          :dataSource='dataList'
          v-model='form.fields'
          :listStyle="{width: '45%',height: '480px'}"
          :titles="['可管控字段', '已管控字段']"
          :render='item=>item.title'
          :target-keys='form.fields'
          @change='handleTransferChange'
          filterable>
        </a-transfer>
      </a-form-model-item>
    </a-form-model>
    <field-form ref='fieldForm' @success='getAuthFieldList'></field-form>
  </div>
</template>

<script>
import FieldForm from "../user/components/field_form"
export default {
  name: "RoleField",
  components: { FieldForm },
  data() {

    return {
      dataList: [],
      form: {
        userId: "",
        fields: []
      }
    }
  },
  methods: {
    setData(data) {
      if (data && data.roleId) {
        this.form.roleId = data.roleId
        this.getAuthFieldList()
      }
    },
    handleSubmit() {
      this.$refs["formModal"].validate(valid => {
        if (valid) {
          this.http.post(this, {
            url: this.api.role.setAuthField,
            data: {
              roleId: this.form.roleId,
              fields: this.form.fields.join(",")
            },
            success: function(me) {
            }
          })
        } else {
          return false
        }
      })
    },
    getAuthFieldList() {
      this.http.get(this, {
        url: this.api.role.getAuthFieldList,
        data: {
          roleId: this.form.roleId
        },
        success: (me, data) => {
          data.dataList.map(item => {
            item.key = item.fieldId
            item.title = item.fieldName
          })
          me.dataList = data.dataList
          me.form.fields = data.fields
        }
      })
    },
    handleTransferChange(targetKeys, direction, moveKeys) {
      this.form.fields = targetKeys
    }
  }
}
</script>
